var category_id = '';

$(function(){
	
	getApiCategoryInfo();
	
	//动态生成div点击事件
	$("#id_api_category").on('click','.api-nav',function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		category_id = $(this).attr("data-id");
		query(1,category_id);
	});
	
	$('#pageNum').dropdown();
	
	//默认查询第一页
	query(1,category_id);
	
	$('#dropdown').on('shown.bs.dropdown', function () {
	     $('.dropdown-menu li').click(function () {
	         var str = $(this).children('a').html();
	         var size = $(this).children('a').children('label').text();
	         str += '<span class="caret"></span>';
	         $("#pageNum").html(str);
	         
	         query(1,category_id);
	     })
	 });
});

function add() {
	$("#id_api_oper").empty();
	var str = '<div class="panel-body">'+
				    '<form id="category-form">'+
				    ' 	<div class="col-md-12 col-sm-6 form-auto-table">'+
				    '      	<table class="table-label">'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>API分类：</label></td>'+
				    '                <td><input id="category_name" type="text" style="height: 28px; width:215px;" class="form-inline-block required"></td>'+
				    '             </tr>'+
				    '         </table>'+
				    '     </div>'+
				    '     <div class="clear"></div>'+
				    '     <div class="form-auto-btn" style="padding-top:15px;">'+
				    '     	<a href="javascript:categaryAdd();" class="btn btn-success">提交</a>'+ 
				    '     	<a href="javascript:layer.closeAll();" class="btn btn-default">取消</a>'+
				    '     </div>'+
				   '</form>'+
			  '</div>';
	
	layer.open({
		type : 1,// 类型为2，解析URL
		closeBtn : 1, // 关闭按钮是否显示 1显示0不显示
		area : [ '420px', '180px' ],
		fix : false, // 不固定
		maxmin : false,
		title : "新增",
		shadeClose : true,
		content : $("#id_api_oper").append(str)
	});
}


function service_add() {
	$("#id_api_oper").empty();
	
	var selectStr = '';
	$.ajax({
		type : "post",
		url :  "api/getApiCategoryInfo",
		async:false, 
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				selectStr += '<select id="category_id" style="height: 28px; width:215px;">';
				for(var i = 0 ; i < datas.length; i++){
					selectStr+= '<option value='+datas[i]['id']+'>'+datas[i]['category_name']+'</option>';
				}
			}
		}
	});
	
	var str = '<div class="panel-body">'+
				    '<form id="service-form">'+
				    ' 	<div class="col-md-12 col-sm-6 form-auto-table">'+
				    '      	<table class="table-label">'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>API分类：</label></td>'+
				    '                <td>'+selectStr+'</td>'+
				    '             </tr>'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>服务名称：</label></td>'+
				    '                <td><input id="service_name" name="service_name" type="text" style="height: 28px; width:215px;" class="form-inline-block required"></td>'+
				    '             </tr>'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>服务调用ID：</label></td>'+
				    '                <td><input id="service_url_id" name="service_url_id" type="text" style="height: 28px; width:215px;" class="form-inline-block required digits"></td>'+
				    '             </tr>'+
				    '         </table>'+
				    '     </div>'+
				    '     <div class="clear"></div>'+
				    '     <div class="form-auto-btn" style="padding-top:15px;">'+
				    '     	<a href="javascript:serviceAdd();" class="btn btn-success">提交</a>'+ 
				    '     	<a href="javascript:layer.closeAll();" class="btn btn-default">取消</a>'+
				    '     </div>'+
				   '</form>'+
			  '</div>';
	
	layer.open({
		type : 1,// 类型为2，解析URL
		closeBtn : 1, // 关闭按钮是否显示 1显示0不显示
		area : [ '480px', '250px' ],
		fix : false, // 不固定
		maxmin : false,
		title : "服务新增",
		shadeClose : true,
		content : $("#id_api_oper").append(str)
	});
}

function serviceAdd(){
	var flag = $("#service-form").valid();
    if(!flag){
        //没有通过验证
        return;
    }
	$.ajax({
		type : "post",
		url :  "api/insertApiService",
		data : {
			"category_id" : $("#category_id").val(),
			"service_name" : $("#service_name").val(),
			"service_url_id" : $("#service_url_id").val()
		},
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				layer.alert("添加成功!",function(){
					$("div[data-id="+category_id+"]").addClass("selected").siblings().removeClass("selected");
					query(1,category_id);
					layer.closeAll();
				});
			}
		}
	});
}

function categaryAdd(){
	
	var flag = $("#category-form").valid();
    if(!flag){
        //没有通过验证
        return;
    }
	var category_name = $("#category_name").val();
	$.ajax({
		type : "post",
		url :  "api/insertApiCategory",
		data : {
			"category_name" : category_name
		},
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				layer.alert("添加成功!",function(){
					getApiCategoryInfo();
					layer.closeAll();
				});
			}
		}
	});
}

function jumpQuery(){
	var page = $("#jump_page").val();
	var reg = /^\+?[1-9][0-9]*$/;//判断是否为正整数 
    var flag = reg.test(trim(page));
    if(!flag){
    	layer.alert("请输入正整数！", {
			icon : 3,
			offset: '100px'
		});
    }else{
    	var totalPages = $("#total_pages").text();
    	if(parseInt(page) > parseInt(totalPages)){
    		layer.alert("跳转页数不能超过总页数！", {
    			icon : 3,
    			offset: '100px'
    		});
    	}else{
    		query(page,category_id);
    	}
    }
}

function query(page,category_id){
	layer.load(4);
	$.ajax({
		type : "post",
		url :  "api/getApiList",
		data : {
			"currentPage" : page,
			"category_id" : category_id,
			"pageSize" : $("#pageNum").children('strong').text()
		},
		dataType : "json",
		success : function(data) {
			layer.closeAll();
			if (data.flag) {
				var datas = data.datas;
				var url = data.url;
				apiList(datas,url);
				var currentPage = data.currentPage;
				var totalPages = data.totalPages;
				var totalData = data.totalData;
				$("#total_data").text(totalData);
				$("#total_pages").text(totalPages);
				var options = {
					currentPage : currentPage, // 当前的请求页面。
					totalPages : totalPages, // 一共多少页。
					size : "normal", // 应该是页眉的大小。
					bootstrapMajorVersion : 3, // bootstrap的版本要求。
					alignment : "right",
					numberOfPages : 5, // 一页显示几个按钮
					itemTexts : function(type, page, current) { // 如下的代码是将页眉显示的中文显示我们自定义的中文。
						switch (type) {
						case "first":
							return "首页";
						case "prev":
							return "上一页";
						case "next":
							return "下一页";
						case "last":
							return "末页";
						case "page":
							return page;
						}
					},
					tooltipTitles : function(type, page, current) { // 提示框，当鼠标放上去给提示
						switch (type) {
						case "first":
							return "首页";
						case "prev":
							return "上一页";
						case "next":
							return "下一页";
						case "last":
							return "末页";
						}
					},
					onPageClicked : function(event, originalEvent, type, page) {
						layer.load(4);
						$.ajax({
							type : "post",
							url :  "api/getApiList",
							data : {
								"currentPage" : page,
								"category_id" : category_id,
								"pageSize" : $("#pageNum").children('strong').text()
							},
							dataType : "json",
							success : function(data) {
								if (data.flag) {
									layer.closeAll();
									var datas = data.datas;
									var url = data.url;
									apiList(datas,url);
								}
							},
							error : function(data) {
								layer.closeAll();
							}
						});
					}
				}
				$('#pageLimit').bootstrapPaginator(options);
			}
		},
		error : function(data) {
			layer.closeAll();
		}
	});
}

function apiList(datas,url){
	$("#id_api_list_ul").empty();
	var str = "";
	//var url = "http://202.103.111.28:7001/mcService/getApi/data";
	for(var i = 0 ; i < datas.length; i++){
		var data = datas[i];
		var category_id = data['category_id'];
		var category_name = data['category_name'];
		var service_id = data['service_id'];
		var service_name = data['service_name'];
		var service_url_id = data['service_url_id'];
		//bug base64解析最后一个参数会出现多余的空格啥的,解决办法：最后一个参数随便传入名称，不做处理
		var parameter = Base64.encode("url="+url+"&service_id="+service_id+"&service_name="+service_name+"&service_url_id="+service_url_id+"&v=1");
		var href = "./api_oper.html?parameter="+parameter;
		str += '<li class="api-list-li">'+
					"<div><a href='javascript:service_edit('"+category_id+"','"+category_name+"')'>编辑</a></div>"+
					'<div class="api-info  click-report-log">'+
						'<a target="_blank" rel="noopener noreferrer" href="'+href+'" title="'+service_name+'">'+
							'<img width="80" height="80" style="position: relative; top: -8px;" src="./images/a43.png">'+
							'<h2 class="api-name">'+service_name+'</h2>'+
						'</a>'+
						/*'<div class="api-price">￥0.0301/次</div>'+*/
					'</div>'+
					'<a class="api-get-btn click-report-log" href="'+href+'">申请数据</a>'+
				'</li>';
	}
	$("#id_api_list_ul").append(str);
}

function service_edit(category_id,category_name,service_id,service_name,service_url_id) {
	alert(category_name)
	$("#id_api_oper").empty();
	
	var str = '<div class="panel-body">'+
				    '<form id="service-form">'+
				    ' 	<div class="col-md-12 col-sm-6 form-auto-table">'+
				    '      	<table class="table-label">'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>API分类：</label></td>'+
				    //"                <td><input id='category_name' name='category_name' type='text' readonly='true' style='height: 28px; width:215px;' class='form-inline-block' value='"+category_name+"'/></td>"+
				    '             </tr>'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>服务名称：</label></td>'+
				    '                <td><input id="service_name" name="service_name" type="text" style="height: 28px; width:215px;" class="form-inline-block required" /></td>'+
				    '             </tr>'+
				    '             <tr>'+
				    '             	 <td class="table-right-width"><label>服务调用ID：</label></td>'+
				    '                <td><input id="service_url_id" name="service_url_id" type="text" style="height: 28px; width:215px;" class="form-inline-block required digits" ></td>'+
				    '             </tr>'+
				    '         </table>'+
				    '     </div>'+
				    '     <div class="clear"></div>'+
				    '     <div class="form-auto-btn" style="padding-top:15px;">'+
				    '     	<a href="javascript:serviceAdd();" class="btn btn-success">提交</a>'+ 
				    '     	<a href="javascript:layer.closeAll();" class="btn btn-default">取消</a>'+
				    '     </div>'+
				   '</form>'+
			  '</div>';
	layer.open({
		type : 1,// 类型为2，解析URL
		closeBtn : 1, // 关闭按钮是否显示 1显示0不显示
		area : [ '480px', '250px' ],
		fix : false, // 不固定
		maxmin : false,
		title : "服务编辑",
		shadeClose : true,
		content : $("#id_api_oper").append(str)
	});
}

function getApiCategoryInfo(){
	$.ajax({
		type : "post",
		url :  "api/getApiCategoryInfo",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				$("#id_api_category").empty();
				var str = '<p>API分类&nbsp;&nbsp;<span><a href="javascript:add()" style="font-size:20px;">新增</a></span></p><div class="api-nav selected">全部</div>';
				for(var i = 0 ; i < datas.length; i++){
					str += '<div class="api-nav" data-id='+datas[i]['id']+'>'+datas[i]['category_name']+'</div>'
				}
				$("#id_api_category").append(str);
			}
		}
	});
}

function trim(str){ 
    return str.replace(/(^\s*)|(\s*$)/g, ""); 
}